<template>
  <h1>Hello Vue3</h1>
  <button>加油~</button>
</template>

<script>
// 💥注意点1：要注意从 vue 中解构，第一次自动导入会有问题，需要手动修改包名为 vue
// 💥注意点2：beforeDestroy 和 destroyed已经被重命名为 beforeUnmount 和 unmouted，所以相应的事件名也需要更新。
import { onBeforeMount, onMounted } from 'vue'
export default {
  setup() {
    // 🔔组合API写法的生命周期钩子
    onBeforeMount(() => {
      console.log('组件挂载前', document.querySelector('h1')) // null
    })
    onMounted(() => {
      console.log('组件挂载后1', document.querySelector('h1')) // <h1></h1>
    })
    onMounted(() => {
      console.log('组件挂载后2', document.querySelector('h1')) // <h1></h1>
    })
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    console.log('组件挂载后3', document.querySelector('h1')) // <h1></h1>
  },
  beforeUpdate() {},
  unmounted() {},
  // 💥 beforeDestroy 和 destroyed已经被重命名为beforeUnmount和unmouted，所以相应的事件名也需要更新。
  beforeUnmount() {},
  unmounted() {},
}
</script>

<style></style>
